<template>
  <div class="content-card">
    <h2>欢迎使用 AI Shop 管理后台</h2>
    <p class="mt-10">这是一个基于Vue3开发的电商后台管理系统前端页面。</p>
    
    <!-- 数据概览卡片 -->
    <div class="overview-cards mt-20">
      <el-card class="overview-card">
        <div class="card-content">
          <div class="card-icon">
            <el-icon><goods /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-value">128</div>
            <div class="card-label">商品总数</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="overview-card">
        <div class="card-content">
          <div class="card-icon">
            <el-icon><shoppingCart /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-value">356</div>
            <div class="card-label">今日订单</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="overview-card">
        <div class="card-content">
          <div class="card-icon">
            <el-icon><money /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-value">¥28,560</div>
            <div class="card-label">今日交易额</div>
          </div>
        </div>
      </el-card>
      
      <el-card class="overview-card">
        <div class="card-content">
          <div class="card-icon">
            <el-icon><user /></el-icon>
          </div>
          <div class="card-info">
            <div class="card-value">8,921</div>
            <div class="card-label">注册用户</div>
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 最近活动记录 -->
    <div class="recent-activities mt-20">
      <h3>最近活动</h3>
      <el-table :data="recentActivities">
        <el-table-column prop="time" label="时间" width="180"></el-table-column>
        <el-table-column prop="action" label="操作" width="180"></el-table-column>
        <el-table-column prop="description" label="描述"></el-table-column>
        <el-table-column prop="user" label="操作用户" width="120"></el-table-column>
      </el-table>
    </div>
  </div>
  
  <!-- API调用示例 -->
  <div class="api-example-section mt-20">
    <h3>API调用示例</h3>
    <ApiExample />
  </div>
</template>

<script>
import { ref } from 'vue'
import { Goods, ShoppingCart, Money, User } from '@element-plus/icons-vue'
import ApiExample from '../components/ApiExample.vue'

export default {
  name: 'Home',
  components: {
    Goods,
    ShoppingCart,
    Money,
    User,
    ApiExample
  },
  setup() {
    // 最近活动数据
    const recentActivities = ref([
      {
        time: '2024-01-20 14:30:22',
        action: '订单创建',
        description: '创建了订单 #ORD-20240120-0001',
        user: '张三'
      },
      {
        time: '2024-01-20 14:15:08',
        action: '商品上架',
        description: '上架了新商品 智能手机 X9',
        user: '李四'
      },
      {
        time: '2024-01-20 13:45:51',
        action: '订单发货',
        description: '发货了订单 #ORD-20240120-0002',
        user: '王五'
      },
      {
        time: '2024-01-20 12:30:18',
        action: '对账完成',
        description: '完成了今日的支付对账',
        user: '管理员'
      },
      {
        time: '2024-01-20 11:20:36',
        action: '商品更新',
        description: '更新了商品 笔记本电脑 Pro 的价格',
        user: '李四'
      }
    ])
    
    return {
      recentActivities
    }
  }
}
</script>

<style scoped lang="scss">
.overview-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.overview-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  
  .card-content {
    display: flex;
    align-items: center;
    padding: 10px 0;
    
    .card-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: rgba(64, 158, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      color: var(--primary-color);
      font-size: 24px;
    }
    
    .card-info {
      flex: 1;
      
      .card-value {
        font-size: 24px;
        font-weight: bold;
        color: var(--text-primary);
      }
      
      .card-label {
        font-size: 14px;
        color: var(--text-secondary);
        margin-top: 4px;
      }
    }
  }
}

.recent-activities {
  .el-table {
    margin-top: 15px;
  }
}

.api-example-section {
  margin-top: 20px;
}
</style>